<template>
	<view>
		<scroll-view :scroll-y="true" class="scrollContent" :enhanced="true" :bounces="false" :show-scrollbar="false">
			<view class="my_minHeight">
				<view class="clientInfo_container">
					<view class="content">
						<view class="d-flex flex-wrap a-center j-sb mb5">
							<view class="d-flex flex-column a-center j-center content_item mb15" v-for="item in orderType"
								:key="item.title">
								<view class="title_item mb5">{{item.title}}</view>
								<view class="d-flex a-end">
									<view class="value_item mr5">{{item.value}}</view>
									<view class="dw pb5">{{item.dw}}</view>
								</view>
							</view>
						</view>

						<view class="">
							<view class="bottom-centent w100p mb20">
								<echartsUniapp ref="echarts1" :option="option1" canvasId="echarts1"></echartsUniapp>
							</view>
							<view class="bottom-centent w100p mb20">
								<echartsUniapp ref="echarts2" :option="option2" canvasId="echarts2"></echartsUniapp>
							</view>
							<view class="bottom-centent w100p mb20">
								<echartsUniapp ref="echarts3" :option="option3" canvasId="echarts3"></echartsUniapp>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import echartsUniapp from "@/components/echarts-uniapp/echarts-uniapp.vue"
	import {
		countOrderAndCustomerformApp,
		countOrdersLastSevenDaysformApp,
		sumActuallyAmountLastSevenDaysformApp,
		countCustomerLastSevenDaysfromApp
	} from "@/api/index.js"
	import {
		BASE_URL
	} from "@/utils/common.js"

	export default {
		components: {
			echartsUniapp
		},
		data() {
			return {
				BASE_URL: BASE_URL,
				userInfo: uni.getStorageSync('housekeeperInfo'),
				listData: [],
				orderType: [{
					title: '客户数量',
					value: '',
					dw: '个'
				}, {
					title: '订单数量',
					value: '',
					dw: '单'
				}, {
					title: '订单总金额',
					value: '',
					dw: '元'
				}, {
					title: '核销咖啡卷总数',
					value: '',
					dw: '张'
				}],

				option1: {},
				option2: {},
				option3: {},
			};
		},
		onLoad() {},
		onShow() {
			this.getData()
			this.countOrdersLastSevenDaysformApp()
			this.sumActuallyAmountLastSevenDaysformApp()
			this.countCustomerLastSevenDaysfromApp()
		},
		methods: {
			getData() {
				let that = this
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				countOrderAndCustomerformApp().then(res => {
					let obj = res.object
					that.orderType[0].value = obj.customerCount
					that.orderType[1].value = obj.orderCount
					that.orderType[2].value = obj.orderTotalAmount
					that.orderType[3].value = obj.counponCount
					uni.hideLoading()
				})
			},
			countOrdersLastSevenDaysformApp() {
				countOrdersLastSevenDaysformApp().then(res => {
					let myData = {
						title: {
							top: '0px',
							left: 'center',
							text: '近7日订单新增趋势',
							textStyle: {
								fontWeight: 500,
								fontSize: 14,
								fontFamily: 'SourceHan',
							}
						},
						grid: {
							top: '20%',
							left: '5%',
							right: '5%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							data: []
						},
						yAxis: {
							type: 'value',
							boundaryGap: [0, '100%']
						},
						series: [{
							name: 'Fake Data',
							type: 'line',
							symbol: 'none',
							sampling: 'lttb',
							itemStyle: {
								color: 'rgb(255, 70, 131)'
							},
							data: [],
						}]
					}
					myData.xAxis.data = res.object.xcoordinateList
					myData.series[0].data = res.object.ycoordinateList

					this.option1 = myData
				})
			},

			sumActuallyAmountLastSevenDaysformApp() {
				sumActuallyAmountLastSevenDaysformApp().then(res => {
					let myData = {
						title: {
							top: '0px',
							left: 'center',
							text: '近七天订单金额趋势',
							textStyle: {
								fontWeight: 500,
								fontSize: 14,
								fontFamily: 'SourceHan',
							}
						},
						grid: {
							top: '20%',
							left: '5%',
							right: '5%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							axisTick: {
								alignWithLabel: true
							},
							data: []
						},
						yAxis: [{
							type: 'value'
						}],
						series: [{
							name: 'Fake Data',
							type: 'bar',
							barWidth: '60%',
							data: [],
						}]
					}
					myData.xAxis.data = res.object.xcoordinateList
					myData.series[0].data = res.object.ycoordinateList

					this.option2 = myData
				})
			},
			countCustomerLastSevenDaysfromApp() {
				countCustomerLastSevenDaysfromApp().then(res => {
					let myData = {
						title: {
							top: '0px',
							left: 'center',
							text: '近7天咖啡券核销趋势',
							textStyle: {
								fontWeight: 500,
								fontSize: 14,
								fontFamily: 'SourceHan',
							}
						},
						grid: {
							top: '20%',
							left: '5%',
							right: '5%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'category',
							boundaryGap: false,
							axisTick: {
								alignWithLabel: true
							},
							data: []
						},
						yAxis: [{
							type: 'value'
						}],
						series: [{
							name: 'Fake Data',
							type: 'bar',
							barWidth: '60%',
							data: [],
						}]
					}
					myData.xAxis.data = res.object.xcoordinateList
					myData.series[0].data = res.object.ycoordinateList

					this.option3 = myData
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.scrollContent {
		//可视高度，需要在多大的盒子中进行滑动
		height: 100vh;
		width: 100%;
	}
	
	.my_minHeight {
		background: linear-gradient(179deg, #46ebb0 0%, #ffffff 80%);
	}

	.clientInfo_container {
		box-sizing: border-box;
		padding: 30rpx 28rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-500 !important;

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;


			.content_item {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #ffffff;
				padding: 30rpx;
				width: 332rpx;


				.title_item {
					font-size: 28rpx;
					color: #333333;
				}

				.value_item {
					font-size: 56rpx;
					color: #333333;
					font-family: Impact, Impact-400;
				}

				.dw {
					font-size: 24rpx;
					color: #666666;
				}
			}

			.bottom-centent {
				box-sizing: border-box;
				box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);
				border-radius: 12rpx;
				background-color: #ffffff;
				padding: 30rpx;
				width: 690upx;
				height: 432upx;
			}
		}
	}
</style>